<template>
  <div class="test-page">
    <h1>后端连接测试</h1>

    <el-card style="margin-bottom: 20px">
      <template #header>
        <span>连接状态</span>
      </template>
      <div>
        <p><strong>后端地址:</strong> http://172.25.64.156:8080</p>
        <p>
          <strong>连接状态:</strong>
          <el-tag
            :type="
              connectionStatus === 'success'
                ? 'success'
                : connectionStatus === 'error'
                  ? 'danger'
                  : 'warning'
            "
          >
            {{
              connectionStatus === 'success'
                ? '连接成功'
                : connectionStatus === 'error'
                  ? '连接失败'
                  : '测试中...'
            }}
          </el-tag>
        </p>
        <el-button type="primary" @click="testConnection" :loading="testing">测试连接</el-button>
      </div>
    </el-card>

    <div class="test-section">
      <h3>API测试</h3>
      <el-button
        type="primary"
        @click="testAddUser"
        :loading="testingAdd"
        style="margin-right: 10px"
      >
        测试添加用户
      </el-button>
      <el-button
        type="success"
        @click="testGetUsersGet"
        :loading="testingGet"
        style="margin-right: 10px"
      >
        测试GET分页获取用户
      </el-button>
      <el-button
        type="info"
        @click="testGetUsersConditionGet"
        :loading="testingGet"
        style="margin-right: 10px"
      >
        测试GET分页条件查询
      </el-button>
      <el-button
        type="warning"
        @click="testAddUserDetailed"
        :loading="testingAdd"
        style="margin-right: 10px"
      >
        详细测试添加用户
      </el-button>
    </div>

    <el-card v-if="testResult">
      <template #header>
        <span>测试结果</span>
      </template>
      <pre>{{ JSON.stringify(testResult, null, 2) }}</pre>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { addUser, getUserList, getAllUsers } from '@/api/user'
import { showCustomMessage } from '@/utils/message'

const connectionStatus = ref('pending')
const testing = ref(false)
const testingAdd = ref(false)
const testingGet = ref(false)
const testResult = ref<any>(null)

// 测试连接 - 尝试多个可能的路径
const testConnection = async () => {
  testing.value = true
  connectionStatus.value = 'pending'

  const testPaths = [
    '/api/doc.html', // Swagger UI
    '/api/swagger-ui.html', // 另一种 Swagger UI 路径
    '/api/v2/api-docs', // OpenAPI 文档
    '/api/health', // 健康检查
    '/api/emp/all', // 直接测试API
  ]

  for (const path of testPaths) {
    try {
      const response = await fetch(path)
      if (response.ok) {
        connectionStatus.value = 'success'
        showCustomMessage(`后端连接成功 (${path})`, 'success')
        return
      }
    } catch (error: any) {
      // 跳过
    }
  }

  connectionStatus.value = 'error'
  showCustomMessage('后端连接失败，请检查后端服务是否启动', 'error')
  testing.value = false
}

// 测试添加用户
const testAddUser = async () => {
  testingAdd.value = true
  try {
    const userData = {
      username: 'testuser' + Date.now(),
      nickname: '测试用户',
      password: '123456',
      name: '测试用户',
      phone: '13800138000',
      email: 'test@example.com',
      age: 25,
      sex: 1,
      eduBack: '本科',
      salaryWishK: 8000,
      address: '北京市朝阳区',
      introduction: '这是一个测试用户',
      hasExperience: 1,
    }
    const response = await addUser(userData)
    testResult.value = response
    showCustomMessage('添加用户测试成功', 'success')
  } catch (error: any) {
    testResult.value = {
      error: error.message,
      details: error.response?.data,
      status: error.response?.status,
    }
    showCustomMessage('添加用户测试失败: ' + error.message, 'error')
  } finally {
    testingAdd.value = false
  }
}

// 测试GET分页获取用户
const testGetUsersGet = async () => {
  testingGet.value = true
  try {
    const response = await getAllUsers({ pageNum: 1, pageSize: 5 })
    testResult.value = response
    showCustomMessage('GET分页获取用户成功', 'success')
  } catch (error: any) {
    testResult.value = {
      error: error.message,
      details: error.response?.data,
      status: error.response?.status,
    }
    showCustomMessage('GET分页获取用户失败: ' + error.message, 'error')
  } finally {
    testingGet.value = false
  }
}

// 测试GET分页条件查询
const testGetUsersConditionGet = async () => {
  testingGet.value = true
  try {
    // 可加条件，如 { name: '张三', ... }
    const response = await getUserList({ pageNum: 1, pageSize: 5 })
    testResult.value = response
    showCustomMessage('GET分页条件查询成功', 'success')
  } catch (error: any) {
    testResult.value = {
      error: error.message,
      details: error.response?.data,
      status: error.response?.status,
    }
    showCustomMessage('GET分页条件查询失败: ' + error.message, 'error')
  } finally {
    testingGet.value = false
  }
}

// 测试添加用户（详细调试）
const testAddUserDetailed = async () => {
  testingAdd.value = true
  try {
    const userData = {
      username: 'testuser' + Date.now(),
      nickname: '测试用户',
      password: '123456',
      name: '测试用户',
      phone: '13800138000',
      email: 'test@example.com',
      age: 25,
      sex: 1,
      eduBack: '本科',
      salaryWishK: 8000,
      address: '北京市朝阳区',
      introduction: '这是一个测试用户',
      hasExperience: 1,
    }
    const response = await addUser(userData)
    testResult.value = response
    showCustomMessage('详细添加用户测试成功', 'success')
  } catch (error: any) {
    testResult.value = {
      error: error.message,
      details: error.response?.data,
      status: error.response?.status,
    }
    showCustomMessage('详细添加用户测试失败: ' + error.message, 'error')
  } finally {
    testingAdd.value = false
  }
}
</script>

<style scoped>
.test-page {
  padding: 20px;
}

.test-page h1 {
  color: #409eff;
  margin-bottom: 20px;
}

pre {
  background-color: #f5f7fa;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
}
</style>
